<template>
  <view class="withdraw-container">
    <!-- 头部余额信息 -->
    <view class="balance-card">
      <text class="title">可提现余额</text>
      <text class="amount">¥{{balance.toFixed(2)}}</text>
    </view>
    
    <!-- 提现表单 -->
    <view class="withdraw-form">
      <!-- 提现金额输入 -->
      <view class="form-item">
        <text class="label">提现金额</text>
        <view class="input-wrapper">
          <text class="currency">¥</text>
          <input 
            class="input" 
            type="number" 
            v-model="withdrawAmount" 
            placeholder="输入提现金额"
            @input="validateAmount"
          />
        </view>
        <text class="hint" v-if="withdrawAmount > 0">实际到账: ¥{{actualAmount.toFixed(2)}}</text>
      </view>
      
      <!-- 提现方式（固定微信） -->
      <view class="form-item">
        <text class="label">提现到</text>
        <view class="wechat-method">
          <image class="icon" src="/static/icons/wechat-pay.png"></image>
          <text class="name">微信零钱</text>
          <text class="account">{{wechatAccount}}</text>
        </view>
      </view>
    </view>
    
    <!-- 提现按钮 -->
    <button 
      class="withdraw-btn" 
      :class="{disabled: !canWithdraw}"
      :disabled="!canWithdraw"
      @click="handleWithdraw"
    >
      立即提现
    </button>
    
    <!-- 温馨提示 -->
    <view class="tips">
      <text>· 提现申请将在48小时内到账</text>
      <text>· 提现手续费1%，最低0.1元/笔</text>
      <text>· 如有问题请联系客服</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 0, // 从接口获取
      withdrawAmount: '',
      wechatAccount: '已绑定微信', // 或显示微信昵称/微信号
      feeRate: 0.01, // 手续费率
      minFee: 0.1 // 最低手续费
    }
  },
  computed: {
    // 实际到账金额
    actualAmount() {
      const amount = parseFloat(this.withdrawAmount) || 0;
      const fee = Math.max(amount * this.feeRate, this.minFee);
      return amount - fee;
    },
    // 是否可以提现
    canWithdraw() {
      const amount = parseFloat(this.withdrawAmount) || 0;
      return amount > 0 && amount <= this.balance;
    }
  },
  onLoad() {
    this.getBalance();
  },
  methods: {
    // 获取用户余额
    async getBalance() {
      try {
        // 这里替换为实际API调用
        const res = await uni.request({
          url: '/api/user/balance'
        });
        this.balance = res.data.balance || 0;
      } catch (error) {
        uni.showToast({
          title: '获取余额失败',
          icon: 'none'
        });
      }
    },
    
    // 验证金额输入
    validateAmount() {
      const amount = parseFloat(this.withdrawAmount);
      if (isNaN(amount)) return;
      
      if (amount > this.balance) {
        uni.showToast({
          title: '超出可用余额',
          icon: 'none'
        });
        this.withdrawAmount = this.balance.toString();
      }
    },
    
    // 处理提现
    handleWithdraw() {
      if (!this.canWithdraw) return;
      
      uni.showModal({
        title: '确认提现',
        content: `提现金额: ¥${this.withdrawAmount}\n到账金额: ¥${this.actualAmount.toFixed(2)}`,
        success: async (res) => {
          if (res.confirm) {
            await this.submitWithdraw();
          }
        }
      });
    },
    
    // 提交提现申请
    async submitWithdraw() {
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      try {
        // 替换为实际API调用
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        uni.showToast({
          title: '提现申请已提交',
          icon: 'success'
        });
        
        // 更新余额
        this.balance -= parseFloat(this.withdrawAmount);
        this.withdrawAmount = '';
        
      } catch (error) {
        uni.showToast({
          title: error.message || '提现失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.withdraw-container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  
  .balance-card {
    background: linear-gradient(135deg, #09bb07, #2ac21f);
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    color: #fff;
    margin-bottom: 40rpx;
    box-shadow: 0 6rpx 12rpx rgba(9, 187, 7, 0.2);
    
    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .amount {
      font-size: 48rpx;
      font-weight: bold;
    }
  }
  
  .withdraw-form {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 30rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .form-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
        display: block;
      }
      
      .input-wrapper {
        display: flex;
        align-items: center;
        
        .currency {
          font-size: 48rpx;
          color: #333;
          margin-right: 10rpx;
        }
        
        .input {
          flex: 1;
          font-size: 48rpx;
          height: 80rpx;
        }
      }
      
      .hint {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
        display: block;
      }
      
      .wechat-method {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        
        .icon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
        
        .name {
          font-size: 30rpx;
          color: #333;
          margin-right: 20rpx;
        }
        
        .account {
          font-size: 26rpx;
          color: #999;
        }
      }
    }
  }
  
  .withdraw-btn {
    background-color: #09bb07;
    color: #fff;
    border-radius: 50rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    
    &.disabled {
      background-color: #cccccc;
      opacity: 0.7;
    }
    
    &::after {
      border: none;
    }
  }
  
  .tips {
    padding: 20rpx;
    
    text {
      display: block;
      font-size: 24rpx;
      color: #999;
      line-height: 1.8;
    }
  }
}
</style>